<template>
  <p class="title" style="color: red; font-weight: 700">App</p>
  <p :class="color">静哥真帅</p>
  <p
    :class="{
      green: true,
      red: false,
    }"
  >
    静哥真帅
  </p>
  <p :class="[color, 'red', 'xxx']">静哥真帅</p>
  <p :style="{ fontWeight: 700, color: 'green' }">静哥真帅</p>
  <p :style="{ fontSize: fontSize + 'px' }">静哥真帅</p>
  <p class="text">静哥真帅</p>
  <input type="text" v-model="fontSize" />
  <div>
    <Child />
  </div>
</template>

<script lang="ts">
import Child from "./Child.vue";

/*
  样式处理：
    1. 静态样式 
      class
      style
    2. 动态样式
      动态class
        字符串形式
        对象形式
        数组形式
      动态style
        属性名采用小驼峰命名
      v-bind（Vue3新增的）
        给样式绑定一个动态的值
    
      结论：能用class用class，除非样式无穷种变化就用style

    3. scoped
      让样式只对当前组件的DOM元素生效(会影响到子组件的根元素)
      - 给所有样式添加一个属性选择器 [data-v-xxx]
      - 给所有DOM元素添加一个自定义属性 data-v-xxx

      问题：在scoped下，希望父组件去修改子组件样式，怎么做？
        1. 去掉scoped，可以。但是制造了新问题，会影响其他组件
        2. 使用深度样式选择器(最佳)
          :deep(xxx){}  就能修改子组件样式
        3. 写全局样式。可能会影响到其他组件
*/

export default {
  name: "App",
  components: {
    Child,
  },
  data() {
    return {
      color: "green",
      fontSize: 16,
    };
  },
  computed: {
    formatFontSize() {
      return this.fontSize + "px";
    },
  },
};
</script>

<style scoped>
.title {
  font-size: 30px;
}
.green {
  color: green;
}
.text {
  font-size: v-bind(formatFontSize);
}

:deep(.child) {
  font-size: 50px;
}
</style>
